* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul li {
    list-style: none;
}

/* 顶部导航 */
.topbar {
    height: 40px;
    background-color: #f55d5d;
}

.container {
    width: 1200px;
    margin: 0 auto;
    background-color: #f79494;
}

.topbar-in {
    height: 40px;
    display: flex;
    justify-content: space-between;
}

.topbar-left {
    width: 400px;
    display: flex;
    justify-content: space-between;
}

.topbar-left>div {
    width: 60px;
    height: 40px;
    background-color: #3deb5a;
}

.topbar-right {
    width: 270px;
    display: flex;
    justify-content: space-between;
}

.topbar-right>div {
    width: 60px;
    height: 40px;
    background-color: #3deb5a;
}

/* 导航头 */
.header {
    width: 1200px;
    height: 80px;
    background-color: #3376ce;
    margin: 10px auto;
}

.header ul {
    width: 680px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}

.header ul li {
    width: 70px;
    height: 80px;
    background-color: #beecb8;
}

/* banner */
.banner {
    width: 1200px;
    height: 600px;
    background-color: #caf35a;
    margin: 20px auto;
}

.banner .left {
    width: 300px;
    height: 600px;
    background-color: #ee8282;
}

.banner .left ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner .left ul li {
    width: 300px;
    height: 66px;
    border: #000 1px solid;
}

/* 分类详情 */
.detais {
    width: 1200px;
    height: 200px;
    background-color: #c264da;
    margin: 20px auto;
    display: flex;
}

.detais .detais-left {
    width: 300px;
    height: 200px;
    background-color: #30b493;
}

.detais .detais-left ul {
    display: flex;
    flex-wrap: wrap;
}

.detais .detais-left ul li {
    width: 100px;
    height: 100px;
    border: #3376ce 1px solid;
}

.detais .detais-right {
    width: 900px;
    height: 200px;
    background-color: #8a5353;
}

.detais .detais-right ul {
    display: flex;
    justify-content: space-evenly;
}

.detais .detais-right ul li {
    width: 280px;
    height: 200px;
    background-color: #e7378f;
}

.detais .detais-right ul li:last-child {
    margin-right: -20px;
}

/* 广告位 */
.adv {
    width: 1200px;
    height: 160px;
    background-color: #0ae4a3;
    margin: 20px auto;
}

/* section */
.section {
    width: 1200px;
    height: 614px;
    background-color: #bcd68a;
    margin: 0 auto;
    display: flex;
}

.section .section-left {
    width: 260px;
    height: 614px;
    background-color: #dd5454;
}

.section .section-right {
    width: 940px;
    height: 614px;
    background-color: #f7b04e;
}

.section .section-right ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 14px;
}

.section .section-right ul li {
    width: 220px;
    height: 295px;
    background-color: #2eddb7;
    margin-bottom: 24px;
}

.section-right ul li:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 220px;
    height: 295px;
    background-color: #30ec3f;
}

.section-right ul li:last-child>div {
    width: 220px;
    height: 138px;
    background-color: #c45ca1;
}